<template>
  <div>
    <Header></Header>
    <div class="m-content">
      <el-input class="inner-search"
                placeholder="请输入内容"
                prefix-icon="el-icon-search"
                clearable
                autofocus
                @change="search"
                v-model="keyword">
      </el-input>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  components: {
    Header
  },
  name: "BlogSearch",
  data() {
    return {
      keyword: ""
    }
  },
  methods: {
    search() {
      this.$router.push({name: 'SearchBlogs', params: {keyword: this.keyword}})
    }
  }
}
</script>

<style scoped>
html, body {
  padding: 0;
  margin: 0;
}


.m-content {
  text-align: center;
  margin: 0 auto;
  width: 80%;
}

.inner-search {
  width: 60%;
  margin-top: 100px;
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}
</style>
